import React, { Component } from 'react'


class Box extends Component {

    // 组件卸载阶段会执行的函数
    componentWillUnmount() {
        console.log('Box 组件被卸载了');
    }

    render() {
        return <div>Box 组件</div>
    }
}

export default class App extends Component {


    // ---------- 挂载阶段
    constructor(props) {
        super(props)
        this.state = {
            count: 100
        }
    }

    /*
        getDerivedStateFromProps 会在调用 render 方法之前调用，
        并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，
        如果返回 null 则不更新任何内容。
        会在挂载和更新更新阶段执行
    */
    static getDerivedStateFromProps(props, state) {
        // 返回一个对象是用来修改 state 数据用的
        return {
            count: state.count + 1
        }
    }

    // 该生命周期在 react17 版本后去掉
    // componentWillMount
    // ************ 初始挂载完成后会执行该生命周期函数
    componentDidMount() {
        // 一般情况下可以在这里进行数据请求
    }


    // ------------------ 更新阶段
    // 更新阶段会被执行，用来做性能优化的一个方法，指明下次数据发生变化的时候
    // 是否需要重新渲染组件
    shouldComponentUpdate(nextProps, nextState) {


        if (nextState.count === 105) {
            // 返回 false 就不做渲染
            return false
        } else {
            // 返回 true 就需要做渲染
            return true
        }
    }

    // ************ 会在挂载和更新更新阶段执行
    render() {
        return (
            <div>
                {this.state.count == 101 && <Box />}

                <h1>{this.state.count}</h1>

                <button onClick={() => {
                    this.setState({
                        count: this.state.count + 1
                    })
                }}>点击增加</button>
            </div>
        )
    }

    // 在真实 DOM 更新之前调用
    getSnapshotBeforeUpdate(prevProps, prevState) {

        // return 出来的内容会作为 componentDidUpdate 的第三个参数 snapshot
        return '你好世界'
    }

    // 在 DOM 更新之后执行
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log(prevProps, prevState, snapshot);
    }

}
